<template>
	<view class="content">
		<view class="park_div">
			<view v-for="(item,index) in data_list" class="item_div" @click.stop="onItemClick(item)">
				<image :src="item.plan" class="item_img"></image>
				<view class="item_txt">{{item.name}}</view>
			</view>
		</view>

		<!-- 空白数据提示 -->
		<view v-if="!data_list || data_list.length <= 0" style="width: 100vw;height: 40vh;line-height: 40vh;text-align: center;">暂无数据~</view>

	</view>
</template>

<script>
	import { getUInfo, timestampToYMDHM, getStatusTxt } from '@/util/util.js'
	export default {
		data() {
			return {
				data_list: [],
				word: '',
			}
		},

		onLoad() {

		},

		mounted() {
			this.getDataList()
		},

		methods: {

			// 点击数据项
			onItemClick(item) {
				uni.navigateTo({ url: `/pages/logcom/query_logcom?type=4&park_id=${item.id}&name=${item.name}` })
			},

			// 接口:物流园区
			async getDataList() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$getPark({ keywords: this.word })
				if (res.code == 1) {
					this.data_list = res.data
					this.data_list = this.data_list.map((item, index) => {
						if (!item.plan) {
							item.plan = '/static/ic_default.png'
						}
						return item
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.park_div {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		width: calc(100% - 24rpx);
		margin: 0rpx 0rpx 88rpx 0rpx;
		/* background: blue; */
	}

	.item_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc((100% - 53rpx) / 2);
		margin: 24rpx 12rpx 0 12rpx;
		/* background: red; */
		height: 280rpx;
		border: solid 1rpx #f0f0f0;
	}

	.item_img {
		width: 100%;
		height: 210rpx;
	}

	.item_txt {
		font-size: 26rpx;
		margin: 12rpx 0 0 0;
		/* 防止文本换行 */
		white-space: nowrap;
		/* 隐藏溢出的内容 */
		overflow: hidden;
		/* 显示省略符号来代表被修剪的文本 */
		text-overflow: ellipsis;
		max-width: 90%;
	}
</style>